<template>
  <div class="ticket">
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="TrainRule"
        :rules="rules"
    >
      <el-form-item label="订单ID" prop="ticketId">
        <el-input v-model="formInline.ticketId" placeholder="车票ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryTicket('TrainRule')">查询</el-button>
      </el-form-item>
      <el-form-item label="车票状态">
        <el-select v-model="formInline.ticketStatus" placeholder="车票状态" @change="onTicketStatusChange">
          <el-option label="新订单" value="0"></el-option>
          <el-option label="已完成" value="1"></el-option>
          <el-option label="已取消" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form
        :inline="true"
        :model="formBuyerId"
        class="demo-form-inline"
        ref="buyerRule"
        :rules="buyerRule">
      <el-form-item label="购买ID" prop="buyerId">
        <el-input v-model="formBuyerId.buyerId" placeholder="购买者ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryByBuyer('buyerRule')">查询</el-button>
      </el-form-item>
      <el-form-item label="支付状态">
        <el-select v-model="formBuyerId.payStatus" placeholder="支付状态" @change="onPayStatusChange">
          <el-option label="待支付" value="0"></el-option>
          <el-option label="已支付" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="ticketId" label="订单ID" width="150"></el-table-column>
      <el-table-column prop="trainId" label="列车ID" width="120"></el-table-column>
      <el-table-column prop="buyerId" label="购买者ID" width="120"></el-table-column>
      <el-table-column prop="departureStation" label="出发站" width="120"></el-table-column>
      <el-table-column prop="destination" label="到达站" width="120"></el-table-column>
      <el-table-column prop="departureTime" label="出发时间" width="120"></el-table-column>
      <el-table-column prop="destinationTime" label="到达时间" width="120"></el-table-column>
      <el-table-column prop="departureDate" label="出发日期" width="120"></el-table-column>
      <el-table-column prop="ticketAmount" label="金额" width="120"></el-table-column>
      <el-table-column prop="seatType" label="座位类型" width="120"></el-table-column>
      <el-table-column prop="carriageNum" label="车厢号" width="120"></el-table-column>
      <el-table-column prop="seatNum" label="座位号" width="120"></el-table-column>
      <el-table-column prop="ticketStatus" label="订单状态" width="120"></el-table-column>
      <el-table-column prop="payStatus" label="支付状态" width="120"></el-table-column>
<!--      <el-table-column fixed="right" label="操作" width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.trainStatus ===-->
<!--            0?'删除':'恢复'}}-->
<!--          </el-button>-->
<!--          <el-button type="text" size="small">编辑</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'Ticket',
    data() {
      return {
        tableData: [],
        formInline: {
          ticketId: '',
          ticketStatus: '',
        },
        formBuyerId: {
          buyerId: '',
          payStatus: ''
        },
        rules: {
          ticketId: [{required: true, message: '请输入列车ID'}],
        },
        buyerRule: {
          buyerId: [{required: true, message: '请输入购买者ID'}]
        }
      }
    },
    mounted() {
      this.getTicketList();
    },
    methods: {
      async getTicketList() {
        const res = await this.$http.get('/admin/ticket/findAll');
        if (res.data.code === 0) {
          this.tableData = res.data.data.ticketList;
        } else {
          this.$message.warning(res.data.msg)
        }
      },
      handleClick(row) {
        window.console.log(row)
      },
      queryTicket(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            const res = await this.$http.get(`/admin/ticket/findByTicketId?ticketId=${this.formInline.ticketId}`);
            if (res.data.code === 0) {
              this.tableData = res.data.data.ticketList;
            } else {
              this.$message.warning(res.data.msg)
            }
          } else {
            return false
          }
        })
      },
      queryByBuyer(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            const res = await this.$http.get(`/admin/ticket/findByBuyerId?buyerId=${this.formBuyerId.buyerId}`);
            if (res.data.code === 0) {
              this.tableData = res.data.data.ticketList;
            } else {
              this.$message.warning(res.data.msg)
            }
          }
        })
      },
      onTicketStatusChange() {
      },
      onPayStatusChange() {
      },
    }
  }
</script>
